<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas1"></canvas>
		<script src="js/number.js"></script>
		<script>
			window.onload=function(){
			var canvas = document.getElementById("canvas1");
			var cxt = canvas.getContext("2d");
			canvas.width = 550;
			canvas.height = 400;
			var r = 5;
			var red=244;
			var green=23;
			var blue=25;
			var color=["#11aa23","#870012","#43aa63","#999999","#909011","#ff0000","#ffff00",
			  "#bb33dd","#5609ff","#bFb0ff"];
 
            window.setInterval(function(){
				cxt.clearRect(0,0,canvas.width,canvas.height);
				var today = new Date();
				var h = today.getHours();
				var m = today.getMinutes();
				var s = today.getSeconds();
			
			    var h10=Math.floor(h/10);
			    var h1=Math.floor(h%10);
				var m10=Math.floor(m/10);
				var m1=Math.floor(m%10);
				var s10=Math.floor(s/10);
				var s1=Math.floor(s%10);
				
				digit(h10,0);
				digit(h1,71);
				digit(m10,182);
				digit(m1,253);
				digit(s10,364);
				digit(s1,435);
				maohao();
					
			    function maohao(){
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 4; j++) {
							if (number_maohao[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = color[Math.floor(Math.random()*10)];
								cxt.arc(142+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 4; j++) {
							if (number_maohao[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = color[Math.floor(Math.random()*10)];
								cxt.arc(324+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					
				}
								
				function  digit ( time,diff ){
				
				switch(time){
					case 0:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_zero[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = color[Math.floor(Math.random()*10)];
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 1:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_one[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = color[Math.floor(Math.random()*10)];
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 2:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_two[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = color[Math.floor(Math.random()*10)];
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 3:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_three[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 4:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_four[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "darkorange";
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 5:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_five[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 6:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_six[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "palevioletred";
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 7:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_seven[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 8:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_eight[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "red";
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 9:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_nine[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "yellow";
								cxt.arc(diff+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
				}
				
				}
				console.log(s10);
				console.log(s1);			
			},1000)
			console.log(number_zero[0][0])
			}
		</script>
	</body>
</html>
